<template>
	<view class="answer-card">
		<view class="tips" v-if="isRightCard">
			恭喜你！完成本次练习<br />
			获得一个皇冠！
			<view class="time">{{ todayTime() }}</view>
		</view>
		<view class="tips" v-else>
			可惜全对才能获得皇冠，呜呜~<br />
			可以试试再次挑战！
			<view class="time">{{ todayTime() }}</view>
		</view>
		<view class="box">
			<view class="title">答题卡</view>
			<scroll-view class="box-list" scroll-y="true">
				<view class="item" v-for="(item,index) in list" :key="index" @click="resetSomePage(index)">
					<view>{{ index+1 }}</view>
					<view>
						<image :src="item.isRight ? rightIcon : wrongIcon"
							:class="item.isRight ? 'right-icon' : 'wrong-icon'"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="buttons-card buttons-right" v-if="isRightCard">
			<view class="button" @click="toNextAnswerPage">继续下节课前题</view>
		</view>
		<view class="buttons-card buttons-wrong" v-else>
			<view class="button" @click="resetSomePage(-1)">错题解析</view>
			<view class="button" @click="resetPage">再次挑战</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default(){
					return []
				}
			},
			isRightCard: {
				type: Boolean,
				default: false
			}
			
		},
		computed:{
			showButton(){
				return this.nextId != 0
			}
		},
		data() {
			return {
				wrongIcon: 'http://qiniu.disciplineeducation.com/studyIcons/wrong-icon.png',
				rightIcon: 'http://qiniu.disciplineeducation.com/studyIcons/right-icon.png',
			}
		},
		methods: {
			//重置习题
			resetPage() {
				this.$emit('resetPage')
			},
			resetSomePage(index){
				this.$emit('resetSomePage',index)
			},
			toNextAnswerPage(){
				this.$emit('toNextAnswerPage')
			},
			todayTime(){
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDay();
				let hours = date.getHours();
				let minutes = date.getMinutes() > 0 ? date.getMinutes() : `0${date.getMinutes()}`;
				return `${month}月${day}日 ${this.getWeek()} ${hours}:${minutes}`
			},
			getWeek(){
				let a = new Array("日", "一", "二", "三", "四", "五", "六");  
				let week = new Date().getDay();  
				let str = " 星期"+ a[week];  
				return str;
			},
		}
	}
</script>

<style scoped lang="scss">
	.answer-card {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		background: #aabfc4 url(http://qiniu.disciplineeducation.com/studyIcons/answer-card-bg.png) no-repeat;
		background-size: 100%;
		.tips {
			color: #fff;
			margin: 80rpx 60rpx;

			.time {
				background-color: rgba(169, 190, 196, 0.5);
				color: #fff;
				line-height: 1;
				border-radius: 5px;
				padding: 15rpx 10rpx;
				margin-top: 10px
			}
		}

		.box {
			border: 1rpx solid #4b4b4b;
			border-bottom-left-radius: 25rpx;
			border-bottom-right-radius: 25rpx;
			margin: 0 60rpx;
			overflow: hidden;

			.title {
				border-bottom: 1rpx solid #4b4b4b;
				height: 60rpx;
				line-height: 60rpx;
				color: #fff;
				text-indent: 20rpx;
				background-color: #c393f7;
			}

			.scroll-box {
				height: 50vh;
				background-color: #fff;
				overflow-y: scroll;
				-webkit-overflow-scrolling: touch;
			}

			.box-list {
				padding-bottom: 30rpx;
				min-height: 90px;
				height: 40vh;
				background-color: #fff;
				overflow-y: scroll;
				-webkit-overflow-scrolling: touch;

				.item {
					float: left;
					width: 20%;
					text-align: center;
					margin-top: 30rpx;

					.right-icon {
						height: 24rpx;
						width: 33rpx
					}

					.wrong-icon {
						height: 24rpx;
						width: 25rpx
					}
				}
			}
		}

		.buttons-card {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 60rpx;
		}

		.buttons-right {
			.button {
				width: 80%;
				margin: 0 auto;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border: 1rpx solid #4b4b4b;
				border-radius: 6px;
				background-color: #fff;
				color: #7f7e61
			}
		}

		.buttons-wrong {
			display: flex;

			.button {
				width: 50%;
				margin: 0 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border: 1rpx solid #4b4b4b;
				border-radius: 6px;
				background-color: #fff;
				color: #7f7e61
			}
		}
	}
</style>
